{# src/VEKA/PojetBundle/Resources/views/Projet/chassis.html.twig #}

{% extends "::LayoutProjet.html.twig" %}

{%  block title %}
	{{ parent() }}
{% endblock %}
{% block body %}
<head>
<link href="/Symfony/web/css/bootstrap-responsive.min.css" rel="stylesheet">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	{% block javascript %}
		<script src="{{ asset('bundles/VEKA/js/main.js') }}"></script>
	{% endblock %}
    <style type="text/css">
         .onglet
        {
                display:inline-block;
                margin-left:3px;
                margin-right:3px;
                padding:3px;
            
                cursor:pointer;
				-moz-border-radius: 10px 10px 0 0; 
				-webkit-border-radius: 10px 10px 0 0; 
				border-radius: 10px 10px 0 0;        
				-webkit-border-top-left-radius: 10px; /* pour Chrome */ 
				-webkit-border-top-right-radius: 10px; /* pour Chrome */ 
    
        }
        .onglet_0
        {
                background:#C0C0C0;
                
    
        }
        .onglet_1
        {
                background:#E1E6FA;
                
                padding-bottom:4px;
        }
        .contenu_onglet
        {
                background-color:white ;

                margin-top:-1px;
                padding:5px;
                display:none;
				border:1px solid silver;
				-webkit-border-radius: 10px 10px 0 0; 
				border-radius: 10px 10px 0 0;        
				-webkit-border-top-left-radius: 10px; /* pour Chrome */ 
				-webkit-border-top-right-radius: 10px; /* pour Chrome */ 
				-webkit-border-bottom-left-radius: 10px; /* pour Chrome */ 
				-webkit-border-bottom-right-radius: 10px; /* pour Chrome */ 
        }

        ul
        {
                margin-top:0px;
                margin-bottom:0px;
                margin-left:-10px
        }
        h1
        {
                margin:0px;
                padding:0px;
        }
		@media (max-width: 480px)
    {
    body
        {
        background: red;
        }
    }
 
@media (min-width: 481px) and (max-width: 767px)
    {
    body
        {
        background: purple;
        }
    }
     
@media (min-width: 768px) and (max-width: 979px)
    {
    body
        {
        background: yellow;
        }
    }
 
@media (min-width: 980px) and (max-width: 1200px)
    {
    body
        {
        background: blue;
		
    }
     
@media (min-width: 1200px)
    {
    body
        {
        background: cyan;
        }
    }
        </style>
</head>
			
<body>
<div class="container">


	<div class="text-center span5">
		<div style="margin-bottom:5px;">
			<h4>Finitions</h4> 
			<div style="float:left;">
			<p>Type finition&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<SELECT name="finition" id="TypeFinition" onclick="javascript:change_valeur();change_couleur();">
				<!--<option value="" >Sélectionnez type</option>-->
			{% for finition in listeFinitions %}
				<option value="{{ finition.type }}" >{{ finition.type }}</option>
			{% endfor %}
			</SELECT></p>
			<div id="Couleur" style="display:none">
				<p>Couleur&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			
				<SELECT name="couleur" id="TypeCouleur" size="1" onchange="javascript:change_couleur();" >
					{% for couleur in listeCouleurs %}
								<option value="{{ couleur.libelleCouleur }}" id="{{ couleur.finition.id }}">{{ couleur.libelleCouleur }}</option>
					{% endfor %}
				</SELECT></p>
			</div>
			</div>
			<div id="couleur">
			<img src="/Symfony/web/bundles/VEKA/images/Chêne Clair.jpeg" style='width:80px; height:80px;'/>
			</div>		
		</div>
		
		<form method="post" action={{ path('veka_projet_imprimer') }} style="margin-top:25px;">
		<div>
			
			<h4>Schéma du châssis</h4>
			<input type="hidden" name="url" value="{{ chassis.url }}">
			<img src="/Symfony/web/bundles/VEKA/images/{{ chassis.url }}"/>
				<!-- ou <img src="/Symfony/web/bundles/VEKA/images/{{ post }}"/> -->
		</div>
			
			<h4>Type de vitrage</h4>
    <div class="systeme_onglets">
        <div class="onglets">
		{% if chassis.NbVitrage < 6 %}
			{% for i in 1..chassis.NbVitrage %}
					<span class="onglet_0 onglet" id="onglet_Volume{{i}}" onclick="javascript:change_onglet('Volume{{i}}');">Volume{{i}}</span>
			{% endfor %}
		{% else %}
			{% for i in 1..chassis.NbVitrage %}
					<span class="onglet_0 onglet" id="onglet_Volume{{i}}" onclick="javascript:change_onglet('Volume{{i}}');">Vol{{i}}</span>
			{% endfor %}
		{% endif %}
        <!-- 
		    <span class="onglet_0 onglet" id="onglet_Volume1" onclick="javascript:change_onglet('Volume1');">Volume1</span>
            <span class="onglet_0 onglet" id="onglet_Volume2" onclick="javascript:change_onglet('Volume2');">Volume2</span>
            <span class="onglet_0 onglet" id="onglet_Volume3" onclick="javascript:change_onglet('Volume3');">Volume3</span>
		-->
        </div>
        <div class="contenu_onglets">
		
			{% for i in 1..chassis.NbVitrage %}
				<div class="contenu_onglet" id="contenu_onglet_Volume{{i}}">
                <h1>Info volume {{i}}</h1>
                Choisir le vitrage:<br /> 
				<SELECT name="vitrage" id="TypeVitrage">
				{% for vitrage in listeVitrages %}
					<option value="{{ vitrage.libelleVitrage }}" >{{ vitrage.libelleVitrage }}</option>
				{% endfor %}
			</SELECT>
			
				</div>
			{% endfor %}
         <!--   <div class="contenu_onglet" id="contenu_onglet_Volume1">
                <h1>Info volume 1</h1>
                les informations du volume 1 sont:<br />                
            </div>
            <div class="contenu_onglet" id="contenu_onglet_Volume2">
                <h1>Info volume 2</h1>
                les informations du volume 2 sont:<br />
            </div>
            <div class="contenu_onglet" id="contenu_onglet_Volume3">
                <h1>Info volume 3</h1>
                les informations du volume 3 sont:<br />
            </div>-->
        </div>
    </div>
	</div>
	
	<div class="text-center span5">
		</br></br>
		<div>
			<p>Largeur menuiserie&nbsp;&nbsp;&nbsp;<TEXTAREA name="Largeur" rows=1 onchange="javascript:calcul({{ chassis.NbVitrage }});" >0</TEXTAREA></p>
			<p>Hauteur menuiserie&nbsp;&nbsp;&nbsp;<TEXTAREA name="Hauteur" rows=1 cols=40 onchange="javascript:calcul({{ chassis.NbVitrage }});" >0</TEXTAREA></p>
			<p>Position du meneau&nbsp;&nbsp;&nbsp;<TEXTAREA name="meneau" rows=1 cols=40 onchange="javascript:calcul({{ chassis.NbVitrage }});">0</TEXTAREA></p>
			<p>Position de la traverse&nbsp;&nbsp;&nbsp;<TEXTAREA name="traverse" rows=1 cols=40 onchange="javascript:calcul({{ chassis.NbVitrage }});">0</TEXTAREA></p>
		</div>
		</br></br></br></br></br>
		<div class=well>
			<h4 class="text-center">Résultat</h4></br>
			<p>Uw Châssis&nbsp;&nbsp;&nbsp;<TEXTAREA name="Uw" rows=1 cols=40></TEXTAREA></p>
			<p>Sw Châssis&nbsp;&nbsp;&nbsp;<TEXTAREA name="Sw" rows=1 cols=40></TEXTAREA></p>
			<p>Tlw Châssis&nbsp;&nbsp;&nbsp;<TEXTAREA name="Tlw" rows=1 cols=40></TEXTAREA></p>
		</div>
		<div>
			<p>
			<!--<a href="{{ path('veka_projet_imprimer') }}" target=blank class="btn btn-primary">
			<b>Enregistrer en PDF</b>
			<a>-->
			
			
		</p>
		</div>
		</br>
		
		<input type="submit" value="Enregistrer en PDF" class="btn btn-primary">	
	</div>
	</br></br></br></br>
	
</div>
    <script type="text/javascript">
        //<!-- definition onglet actif !
                var anc_onglet = 'Volume1';
                change_onglet(anc_onglet);
        //-->
    </script>
	
<!-- Intégration de la libraire de composants du Bootstrap -->
<script src="/Symfony/web/js/bootstrap.min.js"></script>
</body>
</html>
{% endblock %}